<template>
  <div class="mine">
    <div class="title">
      <div><i class="iconfont icon-shouye" @click="handleIndex"></i></div>
      <div>注册</div>
      <div @click="handleLogin">登录</div>
    </div>
    <div class="register-page">
      <div class="reg">
        <div class="input">
          <input type="text" class="phone" placeholder="请输入手机号" v-model="phone" @blur="JudgePhone">
          <input type="password" class="pwd" v-model="pwd" placeholder="请输入密码" @blur="JudgePwd">
          <input type="password" placeholder="请确认密码" v-model="repwd">
        </div>
        <button class="btnsure" @click="handleRegister">注册</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import sha256 from 'crypto-js/sha256'
import Base64 from 'crypto-js/enc-base64'
import Vue from 'vue'
import { Toast } from 'vant'

Vue.use(Toast)

export default {
  data () {
    return {
      phone: '',
      pwd: '',
      repwd: '',
      Nflag: false,
      Pflag: false
    }
  },
  methods: {
    ...mapMutations('tabbar', ['hide', 'show']),
    handleLogin () {
      this.$router.push('/login')
    },
    handleIndex () {
      this.$router.push('/index')
    },
    handleRegister () {
      if (!this.pwd || !this.repwd || !this.phone) {
        Toast.fail({
          message: '输入框值不能为空',
          className: 'myself'
        })
      } else if (!this.Nflag || !this.Pflag) {
        Toast.fail({
          message: '请输入正确格式',
          className: 'myself'
        })
      } else if (this.pwd === this.repwd) {
        const Number = Base64.stringify(sha256(this.phone))
        const Pass = Base64.stringify(sha256(this.pwd))
        const userInfo = { Number, Pass }
        const allUser = localStorage.getItem('users')
        if (allUser) {
          const users = JSON.parse(allUser)
          const res = users.some(item => item.Number === Number)
          if (res) {
            this.phone = ''
            Toast.fail({
              message: '该手机号已注册',
              className: 'myself'
            })
          } else {
            users.push(userInfo)
            localStorage.setItem('users', JSON.stringify(users))
            Toast.success({
              message: '注册成功',
              className: 'myself'
            })
            this.$router.push('/login')
          }
        } else {
          const arr = [userInfo]
          localStorage.setItem('users', JSON.stringify(arr))
          Toast.success({
            message: '注册成功',
            className: 'myself'
          })
          this.$router.push('/login')
        }
      } else {
        this.pwd = ''
        this.repwd = ''
        Toast.fail({
          message: '两次密码不一致',
          className: 'myself'
        })
      }
    },
    JudgePhone () {
      if (this.phone) {
        const reg = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/
        if (!reg.test(this.phone)) {
          this.phone = ''
          Toast.fail({
            message: '手机号格式不正确',
            className: 'myself'
          })
        } else {
          this.Nflag = true
        }
      } else {
        Toast.fail({
          message: '手机号不能为空',
          className: 'myself'
        })
      }
    },
    JudgePwd () {
      if (!this.pwd) {
        Toast.fail({
          message: '密码不能为空',
          className: 'myself'
        })
      } else if (this.pwd.length < 6) {
        Toast.fail({
          message: '密码长度不能小于6位',
          className: 'myself'
        })
      } else {
        this.Pflag = true
      }
    }
  },
  mounted () {
    this.hide()
  },
  destroyed () {
    this.show()
  }
}
</script>

<style lang="scss" scoped>
.mine{
  position: absolute;
  top:0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  .title{
    padding: 0px 15px;
    height: 50px;
    display: flex;
    width: 100%;
    background: white;
    box-sizing: border-box;
    align-items: center;
    div{
      flex: 1;
      text-align: center;
    }
    div:nth-child(1){
      text-align: left;
    }
    div:nth-child(3){
      text-align: right;
    }
  }
  .register-page{
    margin: 15px 15px 0px;
    .log{
      width: 100%;
      display: flex;
      background: #fcfcfc;
      div{
        width: 50%;
        text-align: center;
        padding: 10px 0px;
        font-size: 14px;
        a{
          text-decoration: none;
          color:gray;
          padding: 6px;
        }
      }
    }
    .reg{
      .input{
        padding:0px 10px;
        background: white;
        box-sizing: border-box;
        position: relative;
        input{
          width: 100%;
          height: 50px;;
          border:none;
          outline: none;
        }
        .phone{
          border-bottom: 1px solid #ddd;
        }
        .pwd {
          border-bottom: 1px solid #ddd;
        }
        .remove{
          position: absolute;
          right: 15px;
          bottom: 17px;
          font-size: 14px;
        }
      }
      .btnsure{
        background: rgb(255,212,68);
        text-align: center;
        font-size: 14px;
        height: 45px;
        line-height: 45px;
        width: 100%;
        border:none;
        margin-top: 15px;
      }
      .remenber{
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
      }
      .soonreg{
        margin-top: 10px;
        font-size: 14px;
        text-align: right;
      }
    }
  }
  .click {
    border-bottom: 2px solid black;
    color:black!important;
  }
}
</style>
<style>
.myself{
  width: auto;
}
</style>
